<template>
  <a-modal title="新增" v-model="show" :maskClosable="false" :width="1260" placement="right" :closable="true" @cancel="onClose"
    :footer="null" :visiable="reconPathInfoAddVisable">
    <a-form-model ref="ruleForm" :model="reconPathInfo" :rules="rules" layout="horizontal">
      <a-row>
        <a-col :md="12" :sm="24" :push="1">
          <a-form-model-item label="交易链路编号" prop="txnChainCode" :label-col="{ span: 4 }" :wrapper-col="{ span: 7 }">
            <a-input v-model="reconPathInfo.txnChainCode" style="width: 300px;" />
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="24" :push="1">
          <a-form-model-item label='交易链路描述' prop="txnChainDesc" :label-col="{ span: 4 }" :wrapper-col="{ span: 7}">
            <a-input v-model="reconPathInfo.txnChainDesc" style="width: 300px;" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24" :push="1">
          <a-form-model-item label="对账截止时间" required prop="reconDeadline" :label-col="{ span: 4 }" :wrapper-col="{ span: 7}">
            <a-date-picker v-model="reconPathInfo.reconDeadline" style="width: 300px;" valueFormat="YYYYMMDD"/>
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="24" :push="1">
          <a-form-model-item label='是否参与对账' prop="reconFlag" :label-col="{ span: 4 }" :wrapper-col="{ span: 7}">
            <a-select v-model="reconPathInfo.reconFlag" :allowClear="true" style="width: 300px">
              <a-select-option value="Y">参与</a-select-option>
              <a-select-option value="N">不参与</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24" :push="1">
          <a-form-model-item label="基准系统" prop="reconStandSysId" :label-col="{ span: 4 }" :wrapper-col="{ span: 7}">
            <a-input v-model="reconPathInfo.reconStandSysId" style="width: 300px" />
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="24" :push="1">
          <a-form-model-item label='对账场景' prop="reconSceneId" :label-col="{ span: 4 }" :wrapper-col="{ span: 7}">
            <a-select v-model="reconPathInfo.reconSceneId" :allowClear="true" style="width: 300px"
              option-filter-prop="children" show-search @search="handleSearch" @change="handleChange">
             <a-select-option v-for="(r,index) in reconSceneIdData" :key="index" :value="r.reconSceneId">{{r.reconSceneId}}</a-select-option>
        </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24" :push="1">
          <a-form-model-item label='交易路径' prop="txnChainPath" :label-col="{ span: 4 }" :wrapper-col="{ span: 7}">
            <a-input v-model="reconPathInfo.txnChainPath" style="width: 350px" />
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="24" :push="1">
          <a-form-model-item label='承兑路径' prop="acceptChainPath" :label-col="{ span: 4 }" :wrapper-col="{ span: 7}">
            <a-input v-model="reconPathInfo.acceptChainPath" style="width: 350px" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <br>

    </a-form-model>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>

<script>
  import ACol from "ant-design-vue/lib/grid/Col";

  const formItemLayout = {
    labelCol: {
      span: 6
    },
    wrapperCol: {
      span: 18
    }
  }
  export default {
    name: "ReconScenePathAdd",
    components: {
      ACol
    },
    props: {
      reconPathInfoAddVisable: {
        default: false
      },
      reconPathInfoInstId: '',
      reconPathCodeData: ''
    },
    data() {
      return {
        loading: false,
        validateStatus: '',
        reconPathInfo: {
          txnChainCode: '',
          txnChainDesc: '',
          instId: '',
          flag: '',
          reconSceneId: '',
          reconDeadline: '',
          reconFlag: '',
          reconStandSysId: "",
          txnChainPath: "",
          acceptChainPath: "",
        },
        value : "",
        reconSceneIdData: [],
        rules: {
          txnChainCode: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }],
          txnChainDesc: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }],
          reconDeadline: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }],
          reconFlag: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }],
          reconStandSysId: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }],
          txnChainPath: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }],
          acceptChainPath: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }],
          reconSceneId: [{
            required: true,
            message: '必填',
            trigger: 'change'
          }],
        },
      }
    },
    // mounted() {
    //   this.$get('recon-path-info/reconSceneIdList').then((r) => {
    //     this.instIdData = r.data
    //   })
    // },
    methods: {
      handleChange(value){
        console.log(value);
      },
      handleSearch(searchValue) {
        this.reconSceneIdData = this.reconSceneIdData.slice(0,0);
          let params = {
              pageSize: 20,
              reconSceneId: searchValue.toUpperCase(),
              instId: this.reconPathInfoInstId,
            }
          this.$get('/admin/csmc/recon-path-info/reconSceneIdList2', params).then((r) => {
              let result = r.data.rows
              console.log(r);
              result.forEach(r => {
                this.reconSceneIdData.push(r);
              })
            })
      },
      reset() {
        this.loading = false
        this.reconPathInfo =  {
          txnChainCode: '',
          txnChainDesc: '',
          instId: '',
          flag: '',
          reconSceneId: '',
          reconDeadline: '',
          reconFlag: '',
          reconStandSysId: "",
          txnChainPath: "",
          acceptChainPath: "",
        };
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      handleSubmit() {
        this.loading = true
        this.reconPathInfo.instId = this.reconPathInfoInstId
        this.reconPathInfo.flag = "add"
        console.log(this.reconPathInfo);
        this.$post('/admin/csmc/recon-path-info', {
          ...this.reconPathInfo
        }).then(() => {
          this.reset()
          this.$emit('success')
        }).catch(() => {
          this.loading = false
        })
      },
    },
    mounted(){
      let params = {
          pageSize: 20,
          instId: this.reconPathInfoInstId,
        }
      this.$get('/admin/csmc/recon-path-info/reconSceneIdList2', params).then((r) => {
          let result = r.data.rows
          console.log(r);
          result.forEach(r => {
            this.reconSceneIdData.push(r);
          })
        })
    },

    computed: {
      show: {
        get: function() {
          return this.reconPathInfoAddVisable
        },
        set: function() {}
      }
    }

  }
</script>

<style scoped>

</style>
